﻿<!DOCTYPE html>
<html ng-app="ui.wisoft">
<head lang="en">
    <meta charset="UTF-8">
    <title>ImageView Demo</title>
    <link rel="stylesheet" href="../../themes/blue/theme.css"/>
    <link rel="stylesheet" href="../../themes/blue/imageview.css"/>
    <style type="text/css">
        .picture {
            padding:0px;
        }
        .picture li{
            display:inline;
            list-style:none;
            margin:0px;
        }
        .picture li img {
            width :98px;
            height:80px;
            border:1px solid #ccc;
            display:block;
            float:left;
            margin:15px 7px;
            border:1px solid #6280AE
        }
    </style>
</head>
<body ng-controller="mainCtrl">
    <input type="button" value="使用imagedata作为数据源" ng-click="open()"/>
    <wi-imageview width="700" height="500" imagedata="imagedata" adaptive="true" previous="previous()" next="next()"></wi-imageview>
    <div>
        <ul class="picture">
            <li><a ng-click="openview(0)"><img title="名称1" src="../../misc/imageview/1.jpg"></a></li>
            <li><a ng-click="openview(1)"><img title="名称2" src="../../misc/imageview/2.jpg"></a></li>
            <li><a ng-click="openview(2)"><img title="名称3" src="../../misc/imageview/3.jpg"></a></li>
        </ul>
    </div>
    <wi-imageview width="700" height="500" imageurls="imageurls" openindex="openindex" adaptive="true"></wi-imageview>
    <script src="../../lib/angular-1.3.0/angular.js"></script>
    <script src="imageview.js"></script>
    <script type="text/javascript">
        angular.module('ui.wisoft', ['ui.wisoft.imageview']).controller('mainCtrl', ['$scope', function($scope){
            $scope.imageurls = ['../../misc/imageview/B11.jpg','../../misc/imageview/B2.jpg','../../misc/imageview/B3.jpg'];

            $scope.openview = function(index) {
                $scope.openindex = index;
            }

            $scope.open = function() {
                $scope.imagedata = getImageData();
            }

            $scope.previous = function() {
                v-=20;
                $scope.imagedata = getImageData();
            }

            $scope.next = function() {
                v+=20;
                $scope.imagedata = getImageData();
            }

            var c = document.createElement('canvas');
            var ctx=c.getContext("2d");
            var v = 1;
            function getImageData() {
                if (v > 255) {
                    v = 1;
                } else if (v < 0) {
                    v = 255;
                }

                var imgData=ctx.createImageData(800,600);
                for (var i=0;i<imgData.data.length;i+=4){
                    imgData.data[i+0]=v;
                    imgData.data[i+1]=v;
                    imgData.data[i+2]=0;
                    imgData.data[i+3]=255;
                }
                return imgData;
            }

        }]);
    </script>
</body>
</html>